<template>
	<view>

		<!-- 轮播图 -->
		<view class="homeSwiper flex align-center justify-center">

			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<image class="w100 h100 s-img" src="/static/test/rb.jpeg"></image>
				</swiper-item>
				<swiper-item>
					<image class="w100 h100 s-img" src="/static/test/rb.jpeg"></image>
				</swiper-item>
				<swiper-item>
					<image class="w100 h100 s-img" src="/static/test/rb.jpeg"></image>
				</swiper-item>
			</swiper>

		</view>

		<!-- icon选择 ==动态获取后台数据，最多2行展示-->
		<view class="icons flex flex-wrap">

			<view class="icon-item flex align-center flex-direction">
				<image class="icon-img" src="/static/test/rb.jpeg"></image>
				<text class="icon-text">
					奶茶饮品
				</text>
			</view>
			<view class="icon-item flex align-center flex-direction">
				<image class="icon-img" src="/static/test/rb.jpeg"></image>
				<text class="icon-text">
					炸鸡汉堡
				</text>
			</view>
			<view class="icon-item flex align-center flex-direction">
				<image class="icon-img" src="/static/test/rb.jpeg"></image>
				<text class="icon-text">
					火锅
				</text>
			</view>
			<view class="icon-item flex align-center flex-direction">
				<image class="icon-img" src="/static/test/rb.jpeg"></image>
				<text class="icon-text">
					烧烤烤串
				</text>
			</view>
			<view class="icon-item flex align-center flex-direction">
				<image class="icon-img" src="/static/test/rb.jpeg"></image>
				<text class="icon-text">
					麻辣烫
				</text>
			</view>

			<view class="icon-item flex align-center flex-direction">
				<image class="icon-img" src="/static/test/rb.jpeg"></image>
				<text class="icon-text">
					奶茶饮品
				</text>
			</view>
			<view class="icon-item flex align-center flex-direction">
				<image class="icon-img" src="/static/test/rb.jpeg"></image>
				<text class="icon-text">
					炸鸡汉堡
				</text>
			</view>
			<view class="icon-item flex align-center flex-direction">
				<image class="icon-img" src="/static/test/rb.jpeg"></image>
				<text class="icon-text">
					火锅
				</text>
			</view>
			<view class="icon-item flex align-center flex-direction">
				<image class="icon-img" src="/static/test/rb.jpeg"></image>
				<text class="icon-text">
					烧烤烤串
				</text>
			</view>
			<view class="icon-item flex align-center flex-direction" @click="jumpIndustry">
				<image class="icon-img" src="/static/test/rb.jpeg"></image>
				<text class="icon-text">
					更多品类
				</text>
			</view>

		</view>
		
		<!-- 、拼图商品图片 -->
		<view class="goods" v-for="(item,index) in 6" :key="index" @click="jumpDetail">
			<view class="goods-pic relative">
				<image class="pic" src="/static/test/rb.jpeg"></image>
				
				<!-- 已经团购了多少 -->
				<view class="group">
					已团200件
				</view>
				<!-- 已经售罄 -->
				<view class="over-all">
					已售罄
				</view>
			</view>
			
			<view class="goods-text">
				<view class="title">
					这个是拼团商品的标题，需要测试一下长度之类的东西还有自提大小之类的
				</view>
			</view>
			
			<view class="text-more flex justify-start align-center ">
				<image class="img" src="/static/mine/pintuan.png"></image>
				<view class="text1 flex align-center justify-between ">
					<text class="item1">
						2-4人团
					</text>
					<text class="item2"> 
						￥750
					</text>
				</view>
				<view class="avatar flex align-center justify-between">
					<image class="a-pic"  src="/static/logo.png"></image>
					<image class="a-pic"  src="/static/logo.png"></image>
					<image class="a-pic"  src="/static/logo.png"></image>
					
				</view>
				<view class="text2">
					去开团
				</view>
				
				
			</view>
			
		</view>
		
		
		<view style="width:750rpx;height:300rpx;"></view>
		
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,

			}
		},
		onLoad() {

		},
		methods: {
			jumpDetail(){
				this.$mRouter.push({
					route: this.$mRoutesConfig.pelletizing.goodsDetail,
					query: {
						a: 1
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	// 拼团商品
	.goods{
		width:750rpx;
		margin-top: 32rpx;
		.goods-pic{
			width:750rpx;
			height:280rpx;
			padding:0 32rpx;
			.pic{
				width:686rpx;
				height:100%;
				border-radius: 16rpx;
			}
			
			.group{
				width:168rpx;
				height:60rpx;
				text-align: center;
				line-height: 60rpx;
				background-color: #d4237a;
				color: white;
				position: absolute;
				left: 32rpx;
				bottom: 30rpx;
				border-radius: 0 20rpx 20rpx 0;
			}
			
			.over-all{
				width:100rpx;
				height:100rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 100rpx;
				position: absolute;
				top:30rpx;
				right:64rpx;
				background-color: #DDDDDD;
				color:white;
			}
			
		}
		
		.goods-text{
			width:750rpx;
			padding:0 32rpx;
			margin-top: 24rpx;
			.title{
				line-height: 50rpx;
				font-size: 30rpx;
				
			}
		}
		
		.text-more{
			width:750rpx;
			height:100rpx;
			padding:0 32rpx;
			.img{
				width:48rpx;
				height:48rpx;
				border-radius: 50%;
			}
			.text1{
				width:200rpx;
				margin:0 32rpx;
				
			}
			.avatar{
				margin-right: 32rpx;
				.a-pic{
					width:48rpx;
					height:48rpx;
					border-radius: 50%;
					margin-right: 12rpx;
				}
				
			}
			.text2{
				width:160rpx;
				height:60rpx;
				background-color: #d4237a;
				color:white;
				font-size: 28rpx;
				line-height: 60rpx;
				text-align: center;
			}
			
		}
		
	}
	// 轮播图
	.homeSwiper {
		width: 750rpx;
		height: 306rpx;

		.swiper {
			width: 750rpx;
			height: 306rpx;
		}
	}

	// icons选择
	.icons {
		width: 750rpx;
		// height:374rpx;
		padding: 0 32rpx;
		margin-top: 8rpx;
		background:white;

		.icon-item {
			width: 136rpx;
			height: 187rpx;
			padding-top: 24rpx;

			.icon-img {
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
			}

			.icon-text {
				font-size: 24rpx;
				font-family: PingFangSC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 33rpx;
				margin-top: 16rpx;
			}
		}

	}
</style>
